
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
.content {width: 600px; height: 700px; position: fixed;margin: 0 auto;border: 1px solid #eee;top: 50%; left: 50%; transform: translate(-50%, -50%);
    box-shadow: 1px 1px 15px 5px rgba(0,0,0,.4);border-radius: 5px;overflow: hidden;}
#chatbox {display: none; float: left;}
.msg_model {float: left; width: 400px;height: 700px; position: relative;box-shadow: 0 0 15px 5px rgba(0,0,0,.4);}
.status {background: #eee;padding: 0 10px;position: absolute; top: 0; left: 0; width: 100%;line-height: 40px;}
.status>span {position: absolute;left: 0; top: 0;padding: 0 10px;cursor: pointer;}
h1 {text-align: center;font-size: 20px;}
.input { background: #000; padding: 3px; position: absolute; bottom: 0; left: 0; width: 100%; }
.input div { border: 0; padding: 5px 10px;height: 35px; width: 69%; margin-right: .5%;background: #fff;display: inline-block;line-height: 25px; overflow-y: auto; }
.input div img { vertical-align: middle; }
.input label { width: 8%;text-align: center; display: inline-block; height: 35px;cursor: pointer; vertical-align: top;background: #fff;
            background: url(../img/zhan.png) no-repeat center;background-size: contain;}
.input span { width: 8%;text-align: center; display: inline-block; height: 35px;cursor: pointer; vertical-align: top;}
.input span img { margin-top: 5px;}
.input button { width: 12%; background: rgb(130, 224, 255); border: none; padding: 10px; float: right; cursor: pointer;}
.msg_list {padding-top: 40px;height: 660px;overflow-y: auto;background: #fff;}
.msg_name {color: #999;}
#cmessages, #pmessages { list-style-type: none; margin: 0; padding: 0;height: auto; }
#cmessages li, #pmessages li { padding: 5px 10px; }
.msg_system {text-align: center;line-height: 25px;background: rgba(0,0,0,.1); margin: 5px 0;}
.me {overflow: hidden; text-align: right;}
.msgContent {padding: 5px;background: #eee;border-radius: 5px;display: inline-block; margin: 5px; max-width: 300px;word-break: break-all; text-align: left;font-size: 15px;}
.msgContent img {max-width: 100%;}
.me .msgContent {float: right}

.private_msg {width: 0;height: 700px;position: absolute;right: 0;top: 0;overflow: hidden;transition: width .5s;box-shadow: 0 0 10px 2px rgba(0,0,0,.4);}
.private_msg.show {width: 100%;}
.user_list {float: right;width: 198px;height: 700px;padding: 5px 10px;position: relative;}
.allUsers {padding: 10px 0; background: #fff; list-style-type: none; max-height: 635px; overflow-y: auto;}
.userListShow {padding: 2px 10px;background: #eee; border-radius: 3px;margin: 5px;cursor: pointer;}
.loginout {position: absolute;left: 0;right: 0;bottom: 0;color: #fff;text-align: center;background: #f06;line-height: 40px;
        text-decoration: none;}
.emoji_icon {vertical-align: middle;}
